<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));


    const chartData = [
        // {
        //     value: ,
        //     name: " 政府性基金收入",
        // },
        {
            value: 2380,
            name: "国家电影事业发展专项资金收入",
        },
        {
            value: 2910,
            name: "小型水库移民扶助基金收入",
        },
        // {
        //     value: ,
        //     name: "国有土地使用权出让收入",
        // },
        {
            value: 100000,
            name: "农业土地开发资金收入",
        },
        {
            value: 19400,
            name: "大中型水库库区基金收入",
        },
        {
            value: 12610,
            name: "国家重大水利工程建设基金收入",
        },{
            value: 956420,
            name: "车辆通行费",
        },
        // {
        //     value: ,
        //     name: "其他政府性基金收入",
        // },
        {
            value: 16582,
            name: "彩票发行机构和彩票销售机构的业务费用",
        },
        {
            value: 90500,
            name: "彩票公益金收入",
        },
        {
            value: 123486,
            name: "专项债务对应项目专项收入",
        }
    ];
    const colorList = ['#88D9FF', '#0092FF', '#81EDD2', '#B0FA93', '#63F2FF', '#9999FE','#88D9FF', '#0092FF', '#81EDD2'];

    const sum = chartData.reduce((per, cur) => per + cur.value, 0);
    const gap = (1 * sum) / 100;
    const pieData1 = [];
    const pieData2 = [];
    const gapData = {
        name: "",
        value: gap,
        itemStyle: {
            color: "transparent",
        },
    };

    //图标位置显示
    let lefts = ["60%","60%","60%","60%","60%","60%","60%","60%","60%"];
    let tops = ["3%", "13%", "23%", "33%", "43%", "53%", "63%", "73%", "83%"];

    let legendData = [];
    let total = 0;
    chartData.forEach((item) => {
        total += item.value;
    });

    for (let i = 0; i < chartData.length; i++) {
        // 第一圈数据
        pieData1.push({
            ...chartData[i],
            itemStyle: {
                borderRadius: 10,
            },
        });
        pieData1.push(gapData);

        // 第二圈数据
        pieData2.push({
            ...chartData[i],
            itemStyle: {
                color: colorList[i],
                opacity: 0.21,
            },
        });
        pieData2.push(gapData);

        //  分散图例
        let bfb = parseInt((chartData[i].value / total) * 100) + "%";
        legendData.push({
            show: true,
            icon: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            left: lefts[i],
            top: tops[i],
            // itemWidth: '10px',
            // itemHeight:'10px',
            itemStyle: {
                color: colorList[i],
            },
            formatter:
                `{aa| ` + chartData[i].name + ` }` + `\n\n` + `{bb| ` + bfb + `}`, // 也可以是个函数return
            x: "left",
            textStyle: {
                // color: "#BAFF7F",
                rich: {
                    aa: {
                        color: "#ffffff",
                    },
                    bb: {
                        color: colorList[i],
                    },
                },
            },
            data: [chartData[i].name],
        });
    }

    // 指定图表的配置项和数据
    option = {
        backgroundColor: '#081c47',
        title: {
            text: "税收收入款级科目预算占比情况",
            subtext: "",
            x: "35%",
            bottom: '4px',
            itemGap:15,
            textStyle: {
                color: "#f5f5f6",
                fontSize: 15,
                fontWeight: "bold",
            },
            subtextStyle: {

                color: "#f5f5f6",
                fontSize: 50,
                fontWeight: "bold",
            },
            textAlign:'center'
        },

        // backgroundColor: "#0F141B",
        tooltip: {
            show: true,
            backgroundColor: "rgba(0, 0, 0,.8)",
            textStyle: {
                color: "#fff",
            },
        },
        legend: legendData,
        grid: {
            top: 30,
            right: 20,
            bottom: 10,
            left: 10,
        },
        color: colorList,
        series: [
            {
                name: '',
                type: 'pie',
                roundCap: true,
                radius: ['80%', '60%'],
                center: ['30%', '45%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: pieData1
            },
            {
                type: 'pie',
                radius: ['20%', '20%'],
                center: ['30%', '45%'],
                gap: 1.71,
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                silent: true,
                data: pieData2
            },
            {
                type: 'gauge',
                zlevel: 2,
                splitNumber: 90,
                radius: '60%',
                center: ['30%', '45%'],
                startAngle: 90,
                endAngle: -269.9999,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    length: 7,
                    lineStyle: {
                        width: 4,
                        color: 'rgb(33,85,130)',
                    },
                },
                pointer: {
                    show: 0,
                },
                detail: {
                    show: 0,
                },
            },
            {
                type: 'pie',
                center: ['30%', '45%'],
                radius: [0, '45.6%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                itemStyle: {
                    color: 'rgba(75, 126, 203,.1)'
                },
                silent: true,
                data: [
                    {
                        value: 100,
                        name: ''
                    }
                ]
            }
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>